/*
 * @Author: kanglang
 * @Date: 2020-07-16 19:01:26
 * @LastEditors: kanglang
 * @LastEditTime: 2020-10-28 11:34:43
 * @Description: 如下
 * noText 可自定义 无数据时的提示
 * emptyIcon 可自定义无数据的图标
 * style 可自定义页面外层的样式
 * noTextSecond 第二行展示文字
 * textStyle 第一行文字样式
 * textSecondStyle 第二行文字样式
 */

import React, { PureComponent } from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import { px2dp } from '@/styles';

export default class EmptyPage extends PureComponent {
    constructor(props) {
        super(props);
        this.state = ({});
    }

    render() {
        const { noText, emptyIcon, style, textStyle, noTextSecond, textSecondStyle } = this.props;
        return (
            <View style={[styles.cellMiddle, style]}>
                <Image
                    style={styles.cellIcon}
                    source={emptyIcon ? emptyIcon : require('../images/empty/empty_03.png')}
                    resizeMode='cover'
                />
                <Text style={[styles.emptyData, textStyle]}>{noText ? noText : "暂无数据"}</Text>
                {
                    noTextSecond &&
                    <Text style={[styles.emptyData1, textSecondStyle]}>{noTextSecond}</Text>
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    cellMiddle: {
        alignItems: 'center',
        marginTop: px2dp(100) * 2,
        paddingTop: px2dp(20) * 2
    },
    cellIcon: {
        width: px2dp(120) * 2,
        height: px2dp(120) * 2,
    },
    emptyData: {
        fontSize: px2dp(14) * 2,
        color: '#9B9A97',
        marginTop: px2dp(20) * 2
    },
    emptyData1: {
        fontSize: px2dp(14) * 2,
        color: '#9B9A97'
    }


});